<template>
      <!-- 左侧边栏 -->
      <div class="left-sidebar">
        <NavSidebar />
      </div>
  
      <!-- 顶部导航栏 -->
      <div class="header">
        <Header />
      </div>
  
      <!-- 主内容区域 -->
      <div class="main-container">
        <router-view />
      </div>
  </template>
  
  <script setup>
  import Header from '@/components/Header.vue';
  import NavSidebar from '@/components/NavSidebar.vue';
  
   


  </script>
  
  <style scoped>
  /* 全局容器 */
  #app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Arial, sans-serif;
  }
  
  /* 左侧边栏 */
  .left-sidebar {
    width: 200px;
    height: 100vh;
    background-color: #304156;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto; /* 防止内容过多时隐藏滚动条 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    color: #fff!important;
  }
  
  /* 顶部导航栏 */
  .header {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
    position: fixed;
    top: 0;
    left: 200px; /* 避免与左侧边栏冲突 */
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  
  /* 主内容区域 */
  .main-container {
    flex: 1;
    margin-top: 60px; /* 避免与顶部导航栏冲突 */
    margin-left: 200px; /* 避免与左侧边栏冲突 */
    padding: 20px;
    background-color: #f5f5f5;
    min-height: calc(100vh - 60px); /* 避免内容溢出 */
    overflow: auto; /* 内容超出时显示滚动条 */
  }
  
  /* 响应式布局优化 */
  @media (max-width: 768px) {
    .left-sidebar {
      width: 0;
      transition: all 0.3s ease;
    }
  
    .header {
      left: 0;
      margin-left: 0;
    }
  
    .main-container {
      margin-left: 0;
      margin-top: 60px;
    }
  }
  </style>
  